<template>
    <div>
        <el-row>
            <el-col :span="24">
                <!-- 放搜索条件 -->
                <el-form :inline="true">
                    <el-form-item label="检查项目名">
                        <el-input placeholder="请输入项目名" v-model="patientCheckForm.projectName" clearable=""></el-input>
                    </el-form-item>
                    <el-form-item label="患者姓名">
                        <el-input placeholder="请输入患者姓名" v-model="patientCheckForm.patientName" clearable=""></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="patientCheckForm.status" clearable="">
                            <el-option v-for="status in payStatus" :key="status.id" :label="status.name"
                                :value="status.id">{{ status.name }}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryList">查询</el-button>
                    </el-form-item>
                </el-form>


            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放表格 -->
                <el-table :data="tableData" style="width: 100%"  border>
                    <el-table-column prop="id" label="编号"></el-table-column>
                    <el-table-column prop="name" label="患者姓名"></el-table-column>
                    <el-table-column prop="ckProjectName" label="检查"></el-table-column>
                    <el-table-column prop="ckStatus" label="状态">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.ckStatus == '1' ? 'success' : (scope.row.ckStatus == '2' ? 'danger' : 'primary')"
                                disable-transitions>
                                {{ scope.row.ckStatus == 1 ? '已缴费' : (scope.row.ckStatus == 2 ? '未缴费' : '已完成') }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button :disabled="scope.row.ckStatus == '2' || scope.row.ckStatus == '3'" type="warning" icon="el-icon-position"
                                @click="complete(scope.row.id)">
                                完成
                            </el-button>
                            <!-- <el-tooltip v-else effect="dark" content="请先缴费" placement="top">
                                <el-button type="warning" icon="el-icon-position"
                                    :disabled="scope.row.ckStatus == '2'">
                                    完成
                                </el-button>
                            </el-tooltip> -->
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放分页 -->
                <el-pagination background :current-page="pageNum" :page-size="pageSize" @next-click="nextPage"
                    @prev-click="prePage" @current-change="currentPage" @size-change="sizeChange"
                    layout="prev, pager, next,total,sizes" :total="total" :page-sizes="[10, 15, 20]">
                </el-pagination>

            </el-col>
        </el-row>

    </div>

</template>

<script>
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 10,
            total: 0,
            tableData: [
            ],
            payStatus: [
                { id: 1, name: "已缴费" },
                { id: 2, name: "未缴费" },
                { id: 3, name: "已完成" },
            ],
            patientCheckForm: {
                projectName: "",
                patientName: "",
                status: ""
            }
        }
    },
    methods: {
        nextPage(val) {
            //用户点击下一页触发
            this.pageNum = val;
            this.queryList();
        },
        prePage(val) {
            //上一页
            this.pageNum = val;
            this.queryList();
        },
        currentPage(val) {
            //当前页
            this.pageNum = val;
            this.queryList();
        },
        sizeChange(val) {
            this.pageNum = 1
            this.pageSize = val;
            this.queryList();
        },

        queryList() {
            let pageparam = {}
            pageparam.pageNum = this.pageNum
            pageparam.pageSize = this.pageSize
            pageparam.param = this.patientCheckForm
            this.$axios.post("api/patientcheck/querylist", pageparam)
                .then(res => {
                    if (res.data.code == 200) {
                        this.pageNum = res.data.data.pageNum
                        this.pageSize = res.data.data.pageSize
                        this.total = res.data.data.total
                        this.tableData = res.data.data.list

                    }
                })
        },
        complete(id) {
            this.$axios.get("api/patientcheck/updatestatus/" + id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.queryList()
                    }
                })
        },


    },
    created() {
        this.queryList()
        this.change()

    },




}
</script>

<style scoped></style>